<template>
  <div class="con">
    <div class="item">
      <img class="bg" :src="bgImg" alt="" />
      <div class="back" @click="back"></div>
      <div class="content">
        <div class="left">
          <img :src="bgImg" alt="" />
          <p class="nums">{{ playLists.playCount | formatNum }}</p>
          <span>歌单</span>
        </div>
        <div class="right">
          <h6>{{ playLists.name }}</h6>
          <div class="ico" v-if="playLists.creator">
            <img class="toux" :src="playLists.creator.avatarUrl" alt="" />
            <span>{{ playLists.creator.nickname }}</span>
          </div>
        </div>
      </div>
    </div>
    <i class="lt">歌曲列表</i>
    <div class="list">
      <SongList
        v-if="showList"
        :songs="showList"
        :showNum="showNumber"
        @play="$emit('play', $event)"
      ></SongList>
    </div>
    <div class="comment">
      <BorderTittle>热门评论</BorderTittle>
      <ul>
        <li v-for="(com, index) in commentList" :key="index">
          <img :src="commentList[index].user.avatarUrl" alt="" />
          <div class="rt">
            <h5 class="name">{{ commentList[index].user.nickname }}</h5>
            <p class="coms">{{ commentList[index].content }}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import SongList from "@/components/SongList";
import BorderTittle from "@/components/BorderTittle";
export default {
  name: "SongItem",
  props: ["id"],
  data() {
    return {
      hotList: [],
      showList: [],
      showNumber: true,
      playLists: [],
      bgImg: "",
      icoImg: [],
      commentList: [],
    };
  },
  created() {
    this.$http
      .get("/playlist/detail", {
        params: {
          id: this.id,
        },
      })
      .then((dlist) => {
        this.playLists = dlist.data.playlist;
        this.bgImg = this.playLists.coverImgUrl;
        // console.log(this.playLists);
        this.hotList = dlist.data.playlist.tracks.map((d, index) => {
          let data = d;
          data.song = {
            artists: d.ar,
            privilege: {
              playMaxbr: dlist.data.privileges[index].playMaxbr,
            },
          };
          return data;
        });
        this.showList = this.hotList.slice(0, 20);
      });
    this.$http
      .get("/comment/playlist", {
        params: {
          id: this.id,
        },
      })
      .then((dc) => {
        // console.log("===>",dc);
        this.commentList = dc.data.comments;
        // console.log(this.commentList);
      });
  },
  methods:{
    back(){
      console.log(11111);
      this.$router.go(-1);
    }
  },
  filters: {
    formatNum(value) {
      return (value / 10000).toFixed(1) + "w";
    },
  },
  components: {
    SongList,
    BorderTittle,
  },
};
</script>
<style lang="less" scoped>
.con {
  position: absolute;
  top: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  z-index: 10;
  background-color: #fff;
  .item {
    width: 100%;
    overflow: hidden;
    // position: relative;
    img.bg {
      width: 100%;
      height: 186px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50%;
      transform: scale(1.5);
      filter: blur(20px);
    }
    .back{
      width: 25px;
      height: 25px;
      background-image: url(../assets/img/cancel.png);
      // background-color: #fff;
      background-size: 25px 25px;
      position: absolute;
      top: 0;
      z-index: 20;
    }
    .content {
      position: absolute;
      top: 0;
      padding: 30px 10px 30px 15px;
      overflow: hidden;
      display: flex;
      z-index: 2;
      .left {
        width: 126px;
        height: 126px;
        position: relative;
        img {
          width: 100%;
          vertical-align: middle;
          border-radius: 10px;
        }
        p {
          position: absolute;
          right: 2px;
          top: 0;
          z-index: 3;
          padding-left: 15px;
          color: #fff;
          font-size: 12px;
          background-position: 0;
          background-repeat: no-repeat;
          background-size: 11px 10px;
          text-shadow: 1px 0 0 rgba(0, 0, 0, 0.1);
          background: url();
          background-repeat: no-repeat;
          background-size: 11px 10px;
          background-position: 0;
        }
        span {
          position: absolute;
          z-index: 3;
          top: 15px;
          left: 0;
          padding: 0 8px;
          height: 17px;
          color: #fff;
          font-size: 9px;
          text-align: center;
          line-height: 17px;
          background-color: rgba(34, 213, 156, 0.4);
          border-top-right-radius: 17px;
          border-bottom-right-radius: 17px;
        }
      }
      .right {
        padding: 0 10px;
        flex: 1;
        h6 {
          font-weight: 400;
          font-size: 17px;
          color: #fefefe;
          // color: red;
        }
        .ico {
          margin-top: 20px;
          color: hsla(0, 0%, 100%, 0.7);
          .toux {
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            vertical-align: middle;
            margin-right: 5px;
          }
        }
      }
    }
  }
  p.nums {
    padding: 0 20px;
    color: #ccc;
    z-index: 3;
  }
  i.lt{
    // background-color: #eeeeee;
    border-bottom: 1px solid rgb(147, 190, 177);
    font-style: italic;
    color: #999;
  }
  .list {
    ul {
      border-radius: 10px;
    }
  }
  .comment {
    ul {
      padding: 0 10px;
      li {
        display: flex;
        border-bottom: 1px solid #ccc;
        padding: 10px 0;
        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          margin: 0 5px;
        }
        div.rt {
          display: flex;
          flex-direction: column;
          h5.name {
            font-weight: normal;
            color: #999;
            font-size: 14px;
          }
          p.coms {
            flex: 1;
            color: #333;
            font-size: 14px;
            margin-top: 5px;
          }
        }
      }
    }
  }
}
</style>